<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#myDiv").show(1000, "swing")
                })

                $("#btn2").click(function(){
                    $("#myDiv").hide(1000, "swing", function(){
                        alert("已隐藏DIV")
                    })
                })

                $("#btn3").click(function(){
                    $("#myDiv").toggle(1000, "swing", function(){
                        alert("已切换DIV")
                    })
                })
            })
        </script>
    </head>
    <body>
        <input type="button" value="显示" id="btn1">
        <input type="button" value="隐藏" id="btn2">
        <input type="button" value="切换" id="btn3">
        
        <div id="myDiv" style="width: 300px; height: 300px; background: rgba(0,0,0,0.4);"></div>
    </body>
</html>